import React, { Component } from 'react';
import {
	StyleSheet, Text, View, Image, TextInput, PixelRatio, TouchableOpacity, Keyboard
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import MethodUtil from '../../../../utils/MethodUtil';
const scale = GLOBAL.SCALE;
export class FormItem extends Component {
	constructor(props) {
		super(props);
		let { value, titleView } = this.props;
		this.state = {
			inputVal: value || '',
			titleView: titleView || false,
		}
	}

	componentWillReceiveProps (props) {
		let { value, regulation } = props;
		if (regulation && regulation == 'thousands') {
			value = value + "";
			if (value.indexOf('.') != -1) {
				value = MethodUtil.toThousands(value, 2);
			} else if (value == '--') {
				value = '--';
			} else {
				value = MethodUtil.toThousands(value, false);
			}
		}
		this.setState({
			inputVal: MethodUtil.checkRate(value) ? value.toString() : value,
		})
	}

	/* 
		type:类型（右侧 ）,值：text(文本),input(输入),select(选择),
		title：标题（左侧文本显示）
		value: 右侧文本显示
		iconRightText:右侧文本前面小图标(￥)
		keyboardType :键盘弹起的类型,
		rightText :  右侧 文字传递
		placeholder ： 占位符
		regulation  :  规则   值：thousands（千分位），/正则/ 
	  isChinese  :  是否能输入中文

		onChangeTextFn: 当文本发生变化时，调用该函数
		onFocusFn : 获得焦点时触发
		onBlurFn:   失去焦点时触发
	*/
	render () {
		let { inputVal } = this.state;
		let { type, title, iconRightText,
			keyboardType, callBackFn, rightText, rightColor, placeholder,
			onChangeTextFn, onFocusFn, onBlurFn, regulation, activeColor, titleView, clickCallBack, isChinese, customStyles } = this.props;
		return (
			<View style={styles.fromItem}>
				<View style={{ alignItems: 'center', flexDirection: 'row', }}>
					<Text style={[styles.fromItemItem, type != "text" ? styles.fromItemItemIwidth : null]}>{title}</Text>
					{titleView ? <Text style={styles.titleView} onPress={clickCallBack}>{'有调整'}</Text> : null}
				</View>
				<TouchableOpacity style={[styles.fromRight, type != "text" ? styles.isWidth : null]} onPress={() => { callBackFn && callBackFn() }}>
					<View style={styles.fromRightText}>
						{
							iconRightText ? (
								<Text style={[styles.iconRightText, activeColor ? styles.activeColor : null]}>{iconRightText}</Text>
							) : null
						}
						{
							(type == 'select' || type == 'text') ? (<Text style={[customStyles, styles.fromText, type != "text" ? styles.fromTextIwidth : null, activeColor ? styles.activeColor : null]} >
								{inputVal ? (inputVal.length > 200 ? inputVal.substr(0, 200) + "..." : inputVal) : ""}</Text>) : (<TextInput
									underlineColorAndroid='transparent'
									keyboardType={keyboardType}
									returnKeyType='done'
									style={[styles.fromInput, activeColor ? styles.activeColor : null]}
									placeholder={placeholder || ''}
									defaultValue={inputVal} //inputVal
									onChangeText={(valStr) => {
										let changStr = valStr;
										// 千分位处理
										if (regulation && regulation == 'thousands') {
											let oldStr = valStr + '';
											if (valStr.indexOf(',') != -1) {
												oldStr = valStr.split(',').join('');
											}
											changStr = MethodUtil.toThousands(valStr, false);
											onChangeTextFn && onChangeTextFn(changStr, oldStr);
										} else {
											onChangeTextFn && onChangeTextFn(changStr);
										}
										if (!isChinese) {
											this.setState({
												inputVal: changStr
											})
										}
									}}
									onFocus={() => {
										let { inputVal } = this.state;
										onFocusFn && onFocusFn(oldStr, inputVal);
									}}
									onBlur={() => {
										let { inputVal } = this.state;
										onBlurFn && onBlurFn(inputVal);
									}}
								/>)
						}
					</View>
					{
						type == 'select' ? (<Image style={styles.arrowLeft} source={require('../../../../imgs/arrow-left.png')} />) : null
					}
					{
						rightText ? (<Text style={[styles.rightText, type != "text" ? styles.rightTextIwidth : null, rightColor]}>{rightText}</Text>) : null
					}
				</TouchableOpacity>
			</View >
		)
	}
}
const styles = StyleSheet.create({
	fromItem: {
		width: '100%',
		//height: 50 * scale,
		paddingTop: 15 * scale,
		paddingBottom: 15 * scale,
		justifyContent: 'space-between',
		alignItems: 'center',
		flexDirection: 'row',
		borderBottomColor: style.color.border,
		borderBottomWidth: 1 / PixelRatio.get(),
	},
	fromRight: {
		justifyContent: 'space-between',
		alignItems: 'center',
		flexDirection: 'row',
	},
	arrowLeft: {
		width: 6 * scale,
		height: 11 * scale,
		position: 'absolute',
		right: 0 * scale,
		//top: 7 * scale
	},
	rightText: {
		fontSize: 13 * scale,
		color: style.color.dark,

	},
	rightTextIwidth: {
		position: 'absolute',
		right: 0 * scale,
		top: 7 * scale
	},
	isWidth: {
		width: 205 * scale,
	},
	fromItemItem: {
		fontSize: 13 * scale,
		color: style.color.dark,
	},
	fromItemItemIwidth: {
		width: 95 * scale,
	},
	fromInput: {
		fontSize: 13 * scale,
		color: style.color.dark,
		width: '100%',
		height: 25 * scale,
		paddingVertical: 0,
	},
	fromText: {
		fontSize: 13 * scale,
		color: style.color.dark,
		//height: 25 * scale,
		//lineHeight: 25 * scale,
		marginHorizontal: 5,
		flexShrink: 1
	},
	fromTextIwidth: {
		width: '100%',
	},
	iconRightText: {
		fontSize: 13 * scale,
		color: style.color.dark,
	},
	fromRightText: {
		alignItems: 'center',
		flexDirection: 'row',
	},
	activeColor: {
		color: style.color.themeColor
	},
	titleView: {
		fontSize: 11 * scale,
		color: style.color.white,
		backgroundColor: '#FFB649',
		borderRadius: 4 * scale,
		paddingLeft: 4 * scale,
		paddingRight: 4 * scale,
		marginLeft: 7 * scale
	}
})